<!DOCTYPE html>
<html lang="en" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>如何利用 AtomGit Pages 快速搭建你的静态站点 | Kyle&#39;s Blog</title>
<meta name="keywords" content="">
<meta name="description" content="如何利用 AtomGit Pages 快速搭建你的静态站点的教程">
<meta name="author" content="Kyle">
<link rel="canonical" href="https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/2/">
<link crossorigin="anonymous" href="/atomgit-blog/assets/css/stylesheet.5ff2630c4d1b3e25bc21f0ecd96681dbcf58219e741fa627857820b5485cb770.css" integrity="sha256-X/JjDE0bPiW8IfDs2WaB289YIZ50H6YnhXggtUhct3A=" rel="preload stylesheet" as="style">
<link rel="icon" href="https://pagesorg.atomgit.net/atomgit-blog/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://pagesorg.atomgit.net/atomgit-blog/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://pagesorg.atomgit.net/atomgit-blog/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://pagesorg.atomgit.net/atomgit-blog/apple-touch-icon.png">
<link rel="mask-icon" href="https://pagesorg.atomgit.net/atomgit-blog/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="en" href="https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/2/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
  

<meta property="og:title" content="如何利用 AtomGit Pages 快速搭建你的静态站点" />
<meta property="og:description" content="如何利用 AtomGit Pages 快速搭建你的静态站点的教程" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/2/" />
<meta property="og:image" content="https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png" />
<meta property="article:section" content="posts" />
<meta property="article:published_time" content="2024-05-10T11:07:36+08:00" />
<meta property="article:modified_time" content="2024-05-10T11:07:36+08:00" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png" />
<meta name="twitter:title" content="如何利用 AtomGit Pages 快速搭建你的静态站点"/>
<meta name="twitter:description" content="如何利用 AtomGit Pages 快速搭建你的静态站点的教程"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "如何利用 AtomGit Pages 快速搭建你的静态站点",
      "item": "https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/2/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "如何利用 AtomGit Pages 快速搭建你的静态站点",
  "name": "如何利用 AtomGit Pages 快速搭建你的静态站点",
  "description": "如何利用 AtomGit Pages 快速搭建你的静态站点的教程",
  "keywords": [
    
  ],
  "articleBody": " 最终效果地址：https://kaiyuanxiaobing.atomgit.net/my-blog-website/\n准备工作 在开始之前，请确保你已经有了以下条件：\n一个 AtomGit 账户。\n安装 Git：\nWindows：下载并安装 Git for Windows。 macOS： 首先，检查是否已经安装了 Git：在终端中运行 git --version。 如果未安装，使用 Homebrew 安装 Git：brew install git。 如果已安装，但版本较旧，可以使用 Homebrew 更新 Git：brew update \u0026\u0026 brew upgrade git。 Linux： 首先，检查是否已经安装了 Git：在终端中运行 git --version。 如果未安装，使用你的包管理器安装 Git（例如，在 Ubuntu 上使用 sudo apt-get update \u0026\u0026 sudo apt-get install git）。 如果已安装，但版本较旧，可以使用包管理器更新 Git（例如，在 Ubuntu 上使用 sudo apt-get update \u0026\u0026 sudo apt-get upgrade git）。 安装 Hugo： 静态博客系统有很多，可以根据自己的喜好选择，本教程选择用 hugo。\nWindows：下载并安装 Hugo for Windows。 macOS：使用 Homebrew 安装 Hugo (brew install hugo) 或者下载 Hugo for macOS。 Linux：使用 Snap 安装 Hugo (sudo snap install hugo) 或者下载 Hugo for Linux。 配置 Git 用户信息： 在终端中运行以下命令来设置你的用户名和电子邮件地址：\n复制代码 git config --global user.email \"you@example.com\" git config --global user.name \"Your Name\" 步骤 1：创建 AtomGit 仓库 登录你的 AtomGit 账户 https://atomgit.com\n创建两个新的仓库：my-blog-source 和 my-blog-website\n注意：my-blog-website 仓库需要设置为“公开”类型，否则Pages将无法正确的访问。 步骤 2：克隆仓库到本地 生成和添加 SSH 密钥： 如果你还没有为 AtomGit 生成 SSH 密钥，请按照AtomGit 的官方文档，配置SSH密钥 中的说明进行操作。 确保你的 SSH 密钥已经添加到你的 AtomGit 账户设置中。\n获取my-blog-source的仓库URL\ngit@atomgit.com:kaiyuanxiaobing/my-blog-source.git 在你的电脑上打开终端或命令提示符，使用 cd 命令切换到你想要存放博客项目的文件夹。比如本教程中是“ C:\\Users\\User”\n克隆 my-blog-source 仓库：\ngit clone 你的用户名/my-blog-source.git 本教程中是：git clone git@atomgit.com:kaiyuanxiaobing/my-blog-source.git\n进入克隆下来的仓库目录：\ncd my-blog-source 步骤 3：初始化 Hugo 站点 在 my-blog-source 目录下运行以下命令初始化 Hugo 站点：\nhugo new site . 🙌注意：如果该目录下不是空的，请使用--force参数，如下图。\n安装一个 Hugo 主题。\nhugo 有非常丰富的主题可供选择，请访问：https://themes.gohugo.io/。 例如，本教程使用以下命令安装 ananke 主题： git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke 打开 hugo.toml 文件，添加以下内容来指定你安装的主题：\ntheme = \"ananke\" 步骤 4：创建你的第一篇博客文章 使用以下命令创建一篇新文章：\nhugo new posts/my-first-post.md 编辑 content/posts/my-first-post.md 文件，添加你的文章内容。\n步骤 5：本地预览 在 my-blog-source 目录下运行以下命令来启动本地服务器：\nhugo server -D 打开浏览器，访问 http://localhost:1313 来预览你的博客。 步骤 6：配置 Hugo 输出路径 打开 config.toml 文件，添加以下内容来指定编译后的输出路径：\npublishDir = \"../my-blog-website\" 将 my-blog-website 目录初始化为一个 Git 仓库，执行以下命令：\ncd .. mkdir my-blog-website cd my-blog-website git init 将 my-blog-website 目录与 AtomGit 上的 my-blog-website 仓库关联：\n获取“my-blog-website”仓库的远程地址。具体方法可以仓库上面的“#### 步骤 2：克隆仓库到本地” 地址为：“git@atomgit.com:kaiyuanxiaobing/my-blog-website.git” git remote add origin 你的用户名/my-blog-website.git 上面 origin 后面的内容请用你自己的“my-blog-website”地址替换。\n步骤 7：编译并发布博客 通过以上，我们从本地可看到自己的站点已经可以正常运行出来了。\n我们需要编译，将其发布到 AtomGit 你的“my-blog-website”仓库中。执行下面的命令。\nhugo cd ../my-blog-website git add . git commit -m \"my website init.\" git push -u origin master 在AtomGit设置并且开启 Pages 功能。\n进入“my-blog-website”仓库的设置，找到 Pages，按照指引一步步操作。最后在仓库的设置Pages下就能看到已经安装了Pages功能，并且有了静态站点的默认 URL，本教程中是 https://kaiyuanxiaobing.atomgit.net/my-blog-website\n步骤 8：线上效果 通过以上的配置和操作，我们就可以实现撰写、编译和部署自己的静态网站到 AtomGit 的 Pages 上了。如下图，教程的最终结果如下。\n教程发布后的地址：https://kaiyuanxiaobing.atomgit.net/my-blog-website/\n用脚本自动化执行：编译并发布 如果用了下面的自动化脚本之后，最终的“my-blog-source”目录结构可能是这样，但也不是一定。\n运行相应的脚本（根据你的操作系统选择对应的脚本）。\n#### Windows (批处理文件) 将下面的代码保存为 `update_blog.bat` 文件，然后在命令提示符或 PowerShell 中运行它。 ```batch @echo off :: 定义仓库路径和远程仓库 URL set SOURCE_DIR=my-blog-source set WEBSITE_DIR=my-blog-website set SOURCE_REPO_URL=git@atomgit.com:yourusername/my-blog-source.git set WEBSITE_REPO_URL=git@atomgit.com:yourusername/my-blog-website.git :: Configure Git user identity git config --global user.email \"你自己的邮箱\" git config --global user.name \"你自己的用户名\" :: 构建 Hugo 站点 cd %SOURCE_DIR% hugo :: 将源博客数据推送到远程仓库 git add . git commit -m \"Update blog source\" git push origin master :: 将生成的文件添加到网站仓库并推送 cd ..\\%WEBSITE_DIR% git add . git commit -m \"Update blog content\" git push origin master echo Blog source and website updated and pushed to AtomGit Pages. ``` #### macOS 和 Linux (Bash 脚本) 将下面的代码保存为 `update_blog.sh` 文件，并赋予它执行权限： ```bash #!/bin/bash # 定义仓库路径和远程仓库 URL SOURCE_DIR=\"my-blog-source\" WEBSITE_DIR=\"my-blog-website\" SOURCE_REPO_URL=\"git@atomgit.com:yourusername/my-blog-source.git\" WEBSITE_REPO_URL=\"git@atomgit.com:yourusername/my-blog-website.git\" # Configure Git user identity git config --global user.email \"你自己的邮箱\" git config --global user.name \"你自己的用户名\" # 构建 Hugo 站点 cd $SOURCE_DIR hugo # 将源博客数据推送到远程仓库 git add . git commit -m \"Update blog source\" git push origin master # 将生成的文件添加到网站仓库并推送 cd ../$WEBSITE_DIR git add . git commit -m \"Update blog content\" git push origin master echo \"Blog source and website updated and pushed to AtomGit Pages.\" ``` 然后运行： ```bash chmod +x update_blog.sh ./update_blog.sh ``` 请确保将 yourusername 替换为你的 AtomGit 用户名，并将 my-blog-source 和 my-blog-website 替换为你的实际仓库名称。此外，确保 Hugo 和 Git 都已经添加到你的系统环境变量中，以便脚本可以在命令行中找到这些工具。\n参考资料 hugo：https://gohugo.io/ ananke：https://github.com/theNewDynamic/gohugo-theme-ananke ",
  "wordCount" : "487",
  "inLanguage": "en",
  "image": "https://pagesorg.atomgit.net/atomgit-blog/images/papermod-cover.png","datePublished": "2024-05-10T11:07:36+08:00",
  "dateModified": "2024-05-10T11:07:36+08:00",
  "author":{
    "@type": "Person",
    "name": "Kyle"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/2/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Kyle's Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://pagesorg.atomgit.net/atomgit-blog/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="https://pagesorg.atomgit.net/atomgit-blog/" accesskey="h" title="Kyle&#39;s Blog (Alt + H)">Kyle&#39;s Blog</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
                <ul class="lang-switch"><li>|</li>
                    <li>
                        <a href="https://pagesorg.atomgit.net/atomgit-blog/fr/" title="French"
                            aria-label=":fr:">🇫🇷</a>
                    </li>
                    <li>
                        <a href="https://pagesorg.atomgit.net/atomgit-blog/fa/" title="Fa"
                            aria-label="Fa">Fa</a>
                    </li>
                </ul>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/archives" title="Archive">
                    <span>Archive</span>
                </a>
            </li>
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/search/" title="Search (Alt &#43; /)" accesskey=/>
                    <span>Search</span>
                </a>
            </li>
            <li>
                <a href="https://pagesorg.atomgit.net/atomgit-blog/tags/" title="Tags">
                    <span>Tags</span>
                </a>
            </li>
            <li>
                <a href="https://github.com/adityatelange/hugo-PaperMod/wiki/" title="WiKi">
                    <span>WiKi</span>&nbsp;
                    <svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
                        stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
                        <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
                        <path d="M15 3h6v6"></path>
                        <path d="M10 14L21 3"></path>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="https://pagesorg.atomgit.net/atomgit-blog/">Home</a>&nbsp;»&nbsp;<a href="https://pagesorg.atomgit.net/atomgit-blog/posts/">Posts</a></div>
    <h1 class="post-title entry-hint-parent">
      如何利用 AtomGit Pages 快速搭建你的静态站点
    </h1>
    <div class="post-description">
      如何利用 AtomGit Pages 快速搭建你的静态站点的教程
    </div>
    <div class="post-meta"><span title='2024-05-10 11:07:36 +0800 CST'>May 10, 2024</span>&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Kyle&nbsp;|&nbsp;<a href="https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content/posts/atomgit/2/index.md" rel="noopener noreferrer" target="_blank">Suggest Changes</a>

</div>
  </header> <div class="toc">
    <details  open>
        <summary accesskey="c" title="(Alt + C)">
            <span class="details">Table of Contents</span>
        </summary>

        <div class="inner"><ul>
                <li>
                    <a href="#%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c" aria-label="准备工作">准备工作</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-1%e5%88%9b%e5%bb%ba-atomgit-%e4%bb%93%e5%ba%93" aria-label="步骤 1：创建 AtomGit 仓库">步骤 1：创建 AtomGit 仓库</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-2%e5%85%8b%e9%9a%86%e4%bb%93%e5%ba%93%e5%88%b0%e6%9c%ac%e5%9c%b0" aria-label="步骤 2：克隆仓库到本地">步骤 2：克隆仓库到本地</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-3%e5%88%9d%e5%a7%8b%e5%8c%96-hugo-%e7%ab%99%e7%82%b9" aria-label="步骤 3：初始化 Hugo 站点">步骤 3：初始化 Hugo 站点</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-4%e5%88%9b%e5%bb%ba%e4%bd%a0%e7%9a%84%e7%ac%ac%e4%b8%80%e7%af%87%e5%8d%9a%e5%ae%a2%e6%96%87%e7%ab%a0" aria-label="步骤 4：创建你的第一篇博客文章">步骤 4：创建你的第一篇博客文章</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-5%e6%9c%ac%e5%9c%b0%e9%a2%84%e8%a7%88" aria-label="步骤 5：本地预览">步骤 5：本地预览</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-6%e9%85%8d%e7%bd%ae-hugo-%e8%be%93%e5%87%ba%e8%b7%af%e5%be%84" aria-label="步骤 6：配置 Hugo 输出路径">步骤 6：配置 Hugo 输出路径</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-7%e7%bc%96%e8%af%91%e5%b9%b6%e5%8f%91%e5%b8%83%e5%8d%9a%e5%ae%a2" aria-label="步骤 7：编译并发布博客">步骤 7：编译并发布博客</a></li>
                <li>
                    <a href="#%e6%ad%a5%e9%aa%a4-8%e7%ba%bf%e4%b8%8a%e6%95%88%e6%9e%9c" aria-label="步骤 8：线上效果">步骤 8：线上效果</a></li>
                <li>
                    <a href="#%e7%94%a8%e8%84%9a%e6%9c%ac%e8%87%aa%e5%8a%a8%e5%8c%96%e6%89%a7%e8%a1%8c%e7%bc%96%e8%af%91%e5%b9%b6%e5%8f%91%e5%b8%83" aria-label="用脚本自动化执行：编译并发布">用脚本自动化执行：编译并发布</a><ul>
                        <ul>
                        <ul>
                        
                <li>
                    <a href="#%e5%8f%82%e8%80%83%e8%b5%84%e6%96%99" aria-label="参考资料">参考资料</a>
                </li>
            </ul>
            </ul>
            </ul>
            </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><blockquote>
<p>最终效果地址：<a href="https://kaiyuanxiaobing.atomgit.net/my-blog-website/">https://kaiyuanxiaobing.atomgit.net/my-blog-website/</a></p>
</blockquote>
<p><img loading="lazy" src="images/17.png" alt="image.png"  />
</p>
<h2 id="准备工作">准备工作<a hidden class="anchor" aria-hidden="true" href="#准备工作">#</a></h2>
<p>在开始之前，请确保你已经有了以下条件：</p>
<ol>
<li>
<p>一个 AtomGit 账户。</p>
</li>
<li>
<p><strong>安装 Git</strong>：</p>
<ul>
<li><strong>Windows</strong>：下载并安装 <a href="/atomgit-blog/">Git for Windows</a>。</li>
<li><strong>macOS</strong>：
<ul>
<li>首先，检查是否已经安装了 Git：在终端中运行 <code>git --version</code>。</li>
<li>如果未安装，使用 <a href="https://brew.sh/">Homebrew</a> 安装 Git：<code>brew install git</code>。</li>
<li>如果已安装，但版本较旧，可以使用 Homebrew 更新 Git：<code>brew update &amp;&amp; brew upgrade git</code>。</li>
</ul>
</li>
<li><strong>Linux</strong>：
<ul>
<li>首先，检查是否已经安装了 Git：在终端中运行 <code>git --version</code>。</li>
<li>如果未安装，使用你的包管理器安装 Git（例如，在 Ubuntu 上使用 <code>sudo apt-get update &amp;&amp; sudo apt-get install git</code>）。</li>
<li>如果已安装，但版本较旧，可以使用包管理器更新 Git（例如，在 Ubuntu 上使用 <code>sudo apt-get update &amp;&amp; sudo apt-get upgrade git</code>）。</li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>安装 Hugo</strong>：
静态博客系统有很多，可以根据自己的喜好选择，本教程选择用 hugo。</p>
<ul>
<li><strong>Windows</strong>：下载并安装 <a href="https://gohugo.io/installation/windows/">Hugo for Windows</a>。</li>
<li><strong>macOS</strong>：使用 Homebrew 安装 Hugo (<code>brew install hugo</code>) 或者下载 <a href="https://gohugo.io/installation/macos/">Hugo for macOS</a>。</li>
<li><strong>Linux</strong>：使用 Snap 安装 Hugo (<code>sudo snap install hugo</code>) 或者下载 <a href="https://gohugo.io/installation/linux/">Hugo for Linux</a>。</li>
</ul>
</li>
<li>
<p>配置 Git 用户信息：
在终端中运行以下命令来设置你的用户名和电子邮件地址：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">复制代码
</span></span><span class="line"><span class="cl">git config --global user.email <span class="s2">&#34;you@example.com&#34;</span>
</span></span><span class="line"><span class="cl">git config --global user.name <span class="s2">&#34;Your Name&#34;</span>
</span></span></code></pre></div></li>
</ol>
<h2 id="步骤-1创建-atomgit-仓库">步骤 1：创建 AtomGit 仓库<a hidden class="anchor" aria-hidden="true" href="#步骤-1创建-atomgit-仓库">#</a></h2>
<ol>
<li>登录你的 AtomGit 账户</li>
</ol>
<ul>
<li>
<p><a href="https://atomgit.com">https://atomgit.com</a></p>
<p><img loading="lazy" src="images/1.png" alt="image.png"  />
</p>
</li>
</ul>
<ol start="2">
<li>
<p>创建两个新的仓库：<code>my-blog-source</code> 和 <code>my-blog-website</code></p>
<p><img loading="lazy" src="images/2.png" alt="image.png"  />
</p>
<p>注意：my-blog-website 仓库需要设置为“公开”类型，否则Pages将无法正确的访问。
<img loading="lazy" src="images/3.png" alt="image.png"  />
</p>
</li>
</ol>
<h2 id="步骤-2克隆仓库到本地">步骤 2：克隆仓库到本地<a hidden class="anchor" aria-hidden="true" href="#步骤-2克隆仓库到本地">#</a></h2>
<ol>
<li>
<p>生成和添加 SSH 密钥：
如果你还没有为 AtomGit 生成 SSH 密钥，请按照<a href="https://docs.atomgit.com/user/sshkey">AtomGit 的官方文档，配置SSH密钥</a> 中的说明进行操作。
确保你的 SSH 密钥已经添加到你的 AtomGit 账户设置中。</p>
</li>
<li>
<p>获取<code>my-blog-source</code>的仓库URL</p>
<p><code>git@atomgit.com:kaiyuanxiaobing/my-blog-source.git</code>
<img loading="lazy" src="images/4.png" alt="image.png"  />
</p>
</li>
<li>
<p>在你的电脑上打开终端或命令提示符，使用 <code>cd</code> 命令切换到你想要存放博客项目的文件夹。比如本教程中是“ C:\Users\User”</p>
</li>
<li>
<p>克隆 <code>my-blog-source</code> 仓库：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git clone 你的用户名/my-blog-source.git
</span></span></code></pre></div><p>本教程中是：<code>git clone git@atomgit.com:kaiyuanxiaobing/my-blog-source.git</code></p>
<p><img loading="lazy" src="images/5.png" alt="image.png"  />
</p>
</li>
<li>
<p>进入克隆下来的仓库目录：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">cd</span> my-blog-source
</span></span></code></pre></div><p><img loading="lazy" src="images/6.png" alt="image.png"  />
</p>
</li>
</ol>
<h2 id="步骤-3初始化-hugo-站点">步骤 3：初始化 Hugo 站点<a hidden class="anchor" aria-hidden="true" href="#步骤-3初始化-hugo-站点">#</a></h2>
<ol>
<li>
<p>在 <code>my-blog-source</code> 目录下运行以下命令初始化 Hugo 站点：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">hugo new site .
</span></span></code></pre></div><p>🙌注意：如果该目录下不是空的，请使用<code>--force</code>参数，如下图。</p>
<p><img loading="lazy" src="images/7.png" alt="image.png"  />
</p>
</li>
<li>
<p>安装一个 Hugo 主题。</p>
<p>hugo 有非常丰富的主题可供选择，请访问：<a href="https://themes.gohugo.io/">https://themes.gohugo.io/</a>。
例如，本教程使用以下命令安装 <a href="https://github.com/theNewDynamic/gohugo-theme-ananke.git"><code>ananke</code></a> 主题：
<img loading="lazy" src="images/8.png" alt="image.png"  />
</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
</span></span></code></pre></div><p><img loading="lazy" src="images/9.png" alt="image.png"  />
</p>
</li>
<li>
<p>打开 <code>hugo.toml</code> 文件，添加以下内容来指定你安装的主题：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">theme</span> <span class="p">=</span> <span class="s2">&#34;ananke&#34;</span>
</span></span></code></pre></div><p><img loading="lazy" src="images/10.png" alt="image.png"  />
</p>
</li>
</ol>
<h2 id="步骤-4创建你的第一篇博客文章">步骤 4：创建你的第一篇博客文章<a hidden class="anchor" aria-hidden="true" href="#步骤-4创建你的第一篇博客文章">#</a></h2>
<ol>
<li>
<p>使用以下命令创建一篇新文章：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">hugo new posts/my-first-post.md
</span></span></code></pre></div><p><img loading="lazy" src="images/11.png" alt="image.png"  />
</p>
</li>
<li>
<p>编辑 <code>content/posts/my-first-post.md</code> 文件，添加你的文章内容。</p>
<p><img loading="lazy" src="images/12.png" alt="image.png"  />
</p>
</li>
</ol>
<h2 id="步骤-5本地预览">步骤 5：本地预览<a hidden class="anchor" aria-hidden="true" href="#步骤-5本地预览">#</a></h2>
<ol>
<li>
<p>在 <code>my-blog-source</code> 目录下运行以下命令来启动本地服务器：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">hugo server -D
</span></span></code></pre></div><p><img loading="lazy" src="images/13.png" alt="image.png"  />
</p>
</li>
<li>
<p>打开浏览器，访问 <a href="http://localhost:1313">http://localhost:1313</a> 来预览你的博客。
<img loading="lazy" src="images/14.png" alt="image.png"  />
</p>
</li>
</ol>
<h2 id="步骤-6配置-hugo-输出路径">步骤 6：配置 Hugo 输出路径<a hidden class="anchor" aria-hidden="true" href="#步骤-6配置-hugo-输出路径">#</a></h2>
<ol>
<li>
<p>打开 <code>config.toml</code> 文件，添加以下内容来指定编译后的输出路径：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">publishDir</span> <span class="p">=</span> <span class="s2">&#34;../my-blog-website&#34;</span>
</span></span></code></pre></div><p><img loading="lazy" src="images/15.png" alt="image.png"  />
</p>
</li>
<li>
<p>将 <code>my-blog-website</code> 目录初始化为一个 Git 仓库，执行以下命令：</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="nb">cd</span> ..
</span></span><span class="line"><span class="cl">mkdir my-blog-website
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> my-blog-website
</span></span><span class="line"><span class="cl">git init
</span></span></code></pre></div></li>
<li>
<p>将 <code>my-blog-website</code> 目录与 AtomGit 上的 <code>my-blog-website</code> 仓库关联：</p>
<ul>
<li>获取“my-blog-website”仓库的远程地址。具体方法可以仓库上面的<code>“#### 步骤 2：克隆仓库到本地”</code></li>
<li>地址为：“git@atomgit.com:kaiyuanxiaobing/my-blog-website.git”</li>
</ul>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git remote add origin  你的用户名/my-blog-website.git
</span></span></code></pre></div><p>上面 origin 后面的内容请用你自己的“my-blog-website”地址替换。</p>
</li>
</ol>
<h2 id="步骤-7编译并发布博客">步骤 7：编译并发布博客<a hidden class="anchor" aria-hidden="true" href="#步骤-7编译并发布博客">#</a></h2>
<ol>
<li>
<p>通过以上，我们从本地可看到自己的站点已经可以正常运行出来了。</p>
</li>
<li>
<p>我们需要编译，将其发布到 AtomGit 你的“my-blog-website”仓库中。执行下面的命令。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">hugo
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> ../my-blog-website
</span></span><span class="line"><span class="cl">git add .
</span></span><span class="line"><span class="cl">git commit -m <span class="s2">&#34;my website init.&#34;</span>
</span></span><span class="line"><span class="cl">git push -u origin master
</span></span></code></pre></div></li>
<li>
<p>在AtomGit设置并且开启 Pages 功能。</p>
<p>进入“my-blog-website”仓库的设置，找到 Pages，按照指引一步步操作。最后在仓库的设置Pages下就能看到已经安装了Pages功能，并且有了静态站点的默认 URL，本教程中是 <a href="https://kaiyuanxiaobing.atomgit.net/my-blog-website">https://kaiyuanxiaobing.atomgit.net/my-blog-website</a></p>
<p><img loading="lazy" src="images/16.png" alt="image.png"  />
</p>
</li>
</ol>
<h2 id="步骤-8线上效果">步骤 8：线上效果<a hidden class="anchor" aria-hidden="true" href="#步骤-8线上效果">#</a></h2>
<p>通过以上的配置和操作，我们就可以实现撰写、编译和部署自己的静态网站到 AtomGit 的 Pages 上了。如下图，教程的最终结果如下。</p>
<p>教程发布后的地址：<a href="https://kaiyuanxiaobing.atomgit.net/my-blog-website/">https://kaiyuanxiaobing.atomgit.net/my-blog-website/</a></p>
<p><img loading="lazy" src="images/17.png" alt="image.png"  />
</p>
<hr>
<h2 id="用脚本自动化执行编译并发布">用脚本自动化执行：编译并发布<a hidden class="anchor" aria-hidden="true" href="#用脚本自动化执行编译并发布">#</a></h2>
<blockquote>
<p>如果用了下面的自动化脚本之后，最终的“my-blog-source”目录结构可能是这样，但也不是一定。</p>
</blockquote>
<blockquote>
<p><img loading="lazy" src="images/18.png" alt="image.png"  />
</p>
</blockquote>
<p>运行相应的脚本（根据你的操作系统选择对应的脚本）。</p>
<pre><code>#### Windows (批处理文件)

将下面的代码保存为 `update_blog.bat` 文件，然后在命令提示符或 PowerShell 中运行它。

```batch
@echo off

:: 定义仓库路径和远程仓库 URL
set SOURCE_DIR=my-blog-source
set WEBSITE_DIR=my-blog-website
set SOURCE_REPO_URL=git@atomgit.com:yourusername/my-blog-source.git
set WEBSITE_REPO_URL=git@atomgit.com:yourusername/my-blog-website.git

:: Configure Git user identity
git config --global user.email &quot;你自己的邮箱&quot;
git config --global user.name &quot;你自己的用户名&quot;

:: 构建 Hugo 站点
cd %SOURCE_DIR%
hugo

:: 将源博客数据推送到远程仓库
git add .
git commit -m &quot;Update blog source&quot;
git push origin master

:: 将生成的文件添加到网站仓库并推送
cd ..\%WEBSITE_DIR%
git add .
git commit -m &quot;Update blog content&quot;
git push origin master

echo Blog source and website updated and pushed to AtomGit Pages.
```

#### macOS 和 Linux (Bash 脚本)

将下面的代码保存为 `update_blog.sh` 文件，并赋予它执行权限：

```bash
#!/bin/bash

# 定义仓库路径和远程仓库 URL
SOURCE_DIR=&quot;my-blog-source&quot;
WEBSITE_DIR=&quot;my-blog-website&quot;
SOURCE_REPO_URL=&quot;git@atomgit.com:yourusername/my-blog-source.git&quot;
WEBSITE_REPO_URL=&quot;git@atomgit.com:yourusername/my-blog-website.git&quot;

# Configure Git user identity
git config --global user.email &quot;你自己的邮箱&quot;
git config --global user.name &quot;你自己的用户名&quot;

# 构建 Hugo 站点
cd $SOURCE_DIR
hugo

# 将源博客数据推送到远程仓库
git add .
git commit -m &quot;Update blog source&quot;
git push origin master

# 将生成的文件添加到网站仓库并推送
cd ../$WEBSITE_DIR
git add .
git commit -m &quot;Update blog content&quot;
git push origin master

echo &quot;Blog source and website updated and pushed to AtomGit Pages.&quot;
```

然后运行：

```bash
chmod +x update_blog.sh
./update_blog.sh
```
</code></pre>
<p>请确保将 <code>yourusername</code> 替换为你的 AtomGit 用户名，并将 <code>my-blog-source</code> 和 <code>my-blog-website</code> 替换为你的实际仓库名称。此外，确保 Hugo 和 Git 都已经添加到你的系统环境变量中，以便脚本可以在命令行中找到这些工具。</p>
<hr>
<h5 id="参考资料">参考资料<a hidden class="anchor" aria-hidden="true" href="#参考资料">#</a></h5>
<ul>
<li>hugo：https://gohugo.io/</li>
<li>ananke：https://github.com/theNewDynamic/gohugo-theme-ananke</li>
</ul>


  </div>

  <footer class="post-footer">
    <ul class="post-tags">
    </ul>
<nav class="paginav">
  <a class="prev" href="https://pagesorg.atomgit.net/atomgit-blog/posts/papermod/papermod-installation/">
    <span class="title">« Prev</span>
    <br>
    <span>Install / Update PaperMod</span>
  </a>
  <a class="next" href="https://pagesorg.atomgit.net/atomgit-blog/posts/atomgit/1/">
    <span class="title">Next »</span>
    <br>
    <span>开放原子开源活动贡献榜开源项目协作教程</span>
  </a>
</nav>


<ul class="share-buttons">
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on x"
            href="https://x.com/intent/tweet/?text=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f&amp;hashtags=">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M512 62.554 L 512 449.446 C 512 483.97 483.97 512 449.446 512 L 62.554 512 C 28.03 512 0 483.97 0 449.446 L 0 62.554 C 0 28.03 28.029 0 62.554 0 L 449.446 0 C 483.971 0 512 28.03 512 62.554 Z M 269.951 190.75 L 182.567 75.216 L 56 75.216 L 207.216 272.95 L 63.9 436.783 L 125.266 436.783 L 235.9 310.383 L 332.567 436.783 L 456 436.783 L 298.367 228.367 L 432.367 75.216 L 371.033 75.216 Z M 127.633 110 L 164.101 110 L 383.481 400.065 L 349.5 400.065 Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on linkedin"
            href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f&amp;title=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9&amp;summary=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9&amp;source=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on reddit"
            href="https://reddit.com/submit?url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f&title=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on facebook"
            href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on whatsapp"
            href="https://api.whatsapp.com/send?text=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9%20-%20https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f">
            <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor">
                <path
                    d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on telegram"
            href="https://telegram.me/share/url?text=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9&amp;url=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f">
            <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor">
                <path
                    d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
            </svg>
        </a>
    </li>
    <li>
        <a target="_blank" rel="noopener noreferrer" aria-label="share 如何利用 AtomGit Pages 快速搭建你的静态站点 on ycombinator"
            href="https://news.ycombinator.com/submitlink?t=%e5%a6%82%e4%bd%95%e5%88%a9%e7%94%a8%20AtomGit%20Pages%20%e5%bf%ab%e9%80%9f%e6%90%ad%e5%bb%ba%e4%bd%a0%e7%9a%84%e9%9d%99%e6%80%81%e7%ab%99%e7%82%b9&u=https%3a%2f%2fpagesorg.atomgit.net%2fatomgit-blog%2fposts%2fatomgit%2f2%2f">
            <svg version="1.1" xml:space="preserve" width="30px" height="30px" viewBox="0 0 512 512" fill="currentColor"
                xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
                <path
                    d="M449.446 0C483.971 0 512 28.03 512 62.554L512 449.446C512 483.97 483.97 512 449.446 512L62.554 512C28.03 512 0 483.97 0 449.446L0 62.554C0 28.03 28.029 0 62.554 0L449.446 0ZM183.8767 87.9921H121.8427L230.6673 292.4508V424.0079H281.3328V292.4508L390.1575 87.9921H328.1233L256 238.2489z" />
            </svg>
        </a>
    </li>
</ul>

  </footer>
</article>
    </main>
    
<footer class="footer">
        <span>© <a href="https://atomgit.com/kyle">Kyle</a></span> · 

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
